<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/test5.css" type="text/css"/>
		<title>任务五</title>
	</head>
	<body>
		<div class="index">
		<div class="nav">
			<img src="../img/29-baidu.png" />
			<ul>
				<li><a href="#">导航链接4</a></li>
				<li><a href="#">导航链接3</a></li>
				<li><a href="#">导航链接2</a></li>
				<li><a href="#">导航链接1</a></li>
			</ul>
		</div>
			<div class="letf">
				<div class="div_all">
					<h2>文章一级标题</h2><br/>
					<h4>文章二级标题</h4><br/>
					<h5>文章作者&nbsp;文章发表时间</h5><br/>
					<p>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落
					</p>
					<p>换行了</p>
					<p>这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
					这是一个很长很长很长的段落，
					<b>这里有粗体字</b>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
					这是一个很长很长很长的段落,这是一个很长很长很长的段落,这是一个很长很长很长的段落，这是一个很长很长很长的段落.
					<br/><img src="../img/键盘.png" alt="图片位置"/><br/>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落。
					</p>
					<p>换行了</p>
					<p>很长很长很长的段落，很长很长很长的段落，
					<b>这里有粗体字</b>
					这是一个很长很长很长的段落，
					<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接http://ife.baidu.com</a>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落。
					</p>
				</div>
				<div class="div_all">
					<h2>另一篇文章一级标题</h2><br/>
					<h4>文章二级标题</h4><br/>
					<h5>文章作者&nbsp;文章发表时间</h5><br/>
					<p>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落
					</p>
					<p>换行了</p>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					</p>
					<p>换行了</p>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
					这是一个很长很长很长的段落，
					<b>这里有粗体字</b>
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
					这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落。
					<br/><img src="../img/键盘.png" alt="图片位置"><br/>
					<ul class="list_style">
						<li>列表项目一</li>
						<li>列表项目二</li>
						<li>列表项目三</li>
					</ul>
					</p>
				</div>
				<div class="div_all">
					<h1>图片</h1><br/>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div><div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
					<div class="img">
						<img class="images" src="../img/键盘.png" />
						<div class="desc">好看的图片</div>
					</div>
				</div>
				<div class="div_all">
					<h2>最后一篇文章一级标题</h2><br/>
					<h4>文章二级标题</h4><br/>
					<h5>文章作者&nbsp;文章发表时间</h5><br/>
					<ol style="margin: 0 2em;">
						<li>排名1</li>
						<li>排名2</li>
						<li>排名3</li>
					</ol>
					下面是一个表格，给表格加一个border="1"好让你看得出这是一个表格
					<table border="1">
						<th>表头1</th>
						<th>表头2</th>
						<th>表头3</th>
						<tr>	
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>	
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>	
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>	
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr class="gray">
							<td style="border: 0px;">总计</td>
							<td colspan="2" style="border: 0px;">1000</td>
						</tr>
					</table>
				</div>
			</div>
				<div class="div_all righ_side">
					<div class="div_gray"></div>
					<h3>这里以后是一个侧栏，这是侧栏的标题</h3	>
					<form>
						<div class="side_center">
							<div class="side_right">
								<label for="text">请输入邮箱地址：</label>
							</div>
							<div class="side_left"><input type="text" placeholder="这里是一个文本输入框" id="text" /></div>
							<div class="side_gray">邮箱地址请按要求格式输入</div>
						</div>	
						<div class="side_center">
							<div class="side_right">
								<label for="text1">请输入密码：</label>
							</div>
							<div class="side_left"><input type="text" placeholder="这是一个文本输入框" id="text1" /> </div>						
						</div>
						<div class="side_center">
							<div class="side_right">
								<label for="text2">请重复输入密码：</label>
							</div>
							<div class="side_left"><input type="text" placeholder="这是一个文本输入框" id="text2" /></div>						
							<div class="side_gray">密码为6-16位英文数字</div>	
						</div>	
						<div class="side_center">
							<div class="side_right">性别：</div>
							<div class="side_left">
								<input  id="man" type="radio" name="sex" value="男" checked/><label for="man"><samp class="small_font">男</samp></label>
								<input 	id="woman" type="radio" name="sex" value="女" checked/><label for="woman"><samp class="small_font">女</samp></label>
							</div>
						</div>	
						<div class="side_center">
						<div class="side_right">城市：</div>
							<div class="side_left">
							<select name="address">
								<option value="北京">北京</option>	
								<option value="海口">海口</option>	
								<option value="哈尔滨">哈尔滨</option>	
							</select>
							</div>
						</div>	
						<div class="side_center">	
							<div class="side_right">爱好：</div>
							<div class="side_left">
								<input id="sport" type="checkbox" value="sport" /><label for="sport"><samp class="small_font">运动</samp></label>
								<input id="article" type="checkbox" value="article"/><label for="article"><samp class="small_font">艺术</samp></label>
								<input id="sicence" type="checkbox" value="science" /><label for="sicence"><samp class="small_font">科学</samp ></label>
							</div>
						</div>	
						<div class="side_center">
							<div class="side_right">
								<samp class="small_font">个人描述：</samp>
							</div>
							<div class="side_left">
								<textarea name="description" rows="3" cols="20" >这是一个多行输入框，输入您的个人描述</textarea>
							</div>
						</div>	
							<input class="button"  type="button" name="button" value="确认提交"/>
					</form>
				</div>		
		</div>
		<div class="statement">
			<b>版权所有&copy;</b>
		</div>
	</body>
</html>
